<template>
    <van-nav-bar title="我的收藏" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="shoucang" v-if="shoucangData?.data != 0">
        <div v-for="item, i in shoucangData?.data" :key="item[0]?.id">
            <van-swipe-cell>
                <van-card @click="seleteListData(item[0]?.id)" num="2" :price="item[0]?.price" :desc="item[0]?.type"
                    :title="item[0]?.title" :thumb="item[0]?.url" />
                <template #right>
                    <van-button square @click="removesc(item[0]?.id, i)" text="删除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </div>
    </div>
    <div v-else>
        <van-empty description="你还没有添加商品到收藏" />
    </div>
</template>

<script setup lang="ts">
import { removeshoucang, seleteshoucang } from '@/api/index'
import { reactive } from 'vue';
import { showToast } from 'vant';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
let store = useStore()
let router = useRouter()

const onClickLeft = () => history.back();
let shoucangData = reactive({
    data: [] as any
})
seleteshoucang(store.state.userData[0].id).then((result) => {
    shoucangData.data = result.data.data

}).catch((err) => {
    console.log(err);
});

let removesc = (shoppingid: Number, index: Number) => {

    removeshoucang(shoppingid, store.state.userData[0].id).then((result) => {
        showToast('删除成功')
        let datas = [] as any
        shoucangData.data.forEach((element: any, i: Number) => {
            if (index != i) {
                datas.push(element)
            }
        });
        shoucangData.data = datas
    }).catch((err) => {
        showToast('删除失败，网络出现了状况')
    });
}
let seleteListData = (id: Number) => {
    router.push({
        path: `/xiangqing?id=${id}`
    })
    store.commit('updataxiangqingdata', id)
}

</script>

<style lang="less" scoped>

.van-nav-bar .van-icon{
    color: #333333;
}
.van-nav-bar__text{
    color: #333333;
}
.shoucang {
    >div {
        background-color: #ffffff;

    }

    .van-card {
        margin-top: 20rem;
        background-color: #ffffff;
    }
}
.delete-button{
    background-color: #ffffff;
    color: #333333;
    border: none;
}
</style>